import {CorrectWrapper, DetailWrapper, Wrapper} from "./style";
import {
    Button,
    Checkbox,
    CheckboxProps,
    Dropdown,
    Input,
    MenuProps,
    Select,
    Space,
    Switch,
    Table, TableColumnsType, TableProps,
    Tabs,
    TabsProps
} from "antd";
import pin from "@/static/imgs/HomeworkDetail/回形针 (2).svg";
import TeacherHomeworkDetailNav from "@/pages/TeacherHomeworkDetail/TeacherHomeworkDetailNav";
import {CSSProperties, useEffect, useState} from "react";
import search from "@/static/imgs/TeacherMyClassroom/搜索 (1).svg";
import {DownOutlined, UndoOutlined} from "@ant-design/icons";
import {useParams} from "react-router";
import {correctHomework, getCorrectList, getHomeworkDetail} from "@/api/teacher/homeworkApi.ts";
import dayjs from "dayjs";

const TeacherHomeworkDetail = () => {
    const {workId} = useParams()
    const [homeworkDetail, setHomeworkDetail] = useState<any>({})
    const [correctList, setCorrectList] = useState<any>([])
    useEffect(() => {
        getHomeworkDetail(workId).then(res => {
            setHomeworkDetail(res.data.data)
        })
        getCorrectList(workId).then(res => {
            setCorrectList(res.data.data)
        })
    }, [])

    // 作业详情
    const Detail = () => {
        return (
            <DetailWrapper>
                <div className='header'>
                    <div className="cmp-work-list-card">
                        <span>作业</span>
                        <div className='margin-top'>
                            <header className='flex-align'>{homeworkDetail.title}</header>
                            <div className='tags'>
                                <span className="tag">{homeworkDetail.type}</span>
                                <span
                                    className="tag">提交起止时间：{dayjs(homeworkDetail.releaseTime).format('YYYY/MM/DD : HH:mm')} - {dayjs(homeworkDetail.deadline).format('YYYY/MM/DD : HH:mm')} </span>
                                <span className="tag">{homeworkDetail.applyTime}</span>
                                <span className="tag-gray">{homeworkDetail.score}分</span>
                                <span className="tag-gray">查重</span>
                                <span className="tag-gray">允许超时提交</span>
                            </div>
                            <div className="homework-description"></div>
                            <div className="stu-status"></div>
                            <div className="attachment_list_area">
                                <div className="left">
                                    <img
                                        src="	https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_others.png"
                                        alt=""/>
                                </div>
                                <div className="right">
                                    <div className='name'>补充练习7</div>
                                    <span className='size'>30KB</span>
                                    <button>下载</button>
                                </div>
                            </div>
                        </div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div className='main-content'>

                    <div className='bottom-component'>
                        <div className="component-main">
                            <div className="left">
                                <img src="https://assets.ketangpai.com//Public/Common/img/40/36.png" alt=""/>
                            </div>
                            <div className="right">
                                <div className="textarea">
                                    <textarea autoComplete={'off'} rows={2} placeholder={'说点什么吧'}></textarea>
                                </div>
                            </div>
                        </div>
                        <div className="component-footer">
                            <Checkbox checked onChange={onCheckBoxChange}>实名发表</Checkbox>
                            <div className='pin'>
                                <img src={pin} alt=""/>
                                <div>添加附件</div>
                            </div>
                            <Button type="primary">发表评论</Button>
                        </div>
                    </div>
                    <div className="comments">
                        <div className="title">
                            全部评论
                            <span>共0条</span>
                        </div>
                        <div className="content">
                            <div className="img-box">
                                <img src="https://www.ketangpai.com/img/img_empty.84d0931c.png" alt=""/>
                            </div>
                            暂无数据
                        </div>
                    </div>
                </div>
            </DetailWrapper>
        )
    }

    const Correct = () => {
        const btnStyle: CSSProperties = {
            borderRadius: '20px',
            marginLeft: '10px'
        }

        const items1: MenuProps['items'] = [
            {
                key: '1',
                label: (
                    <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                        1st menu item
                    </a>
                ),
            }
        ];

        interface DataType {
            key: React.Key;
            studentName: string;
            studentId: string;
            studentNo: string;
            label?: string;
            similarity?: string;
            createAt?: string;
            fontNum?: string;
            correctTimes?: string;
            score: string;
        }

        const columns: TableColumnsType<DataType> = [
            {
                title: '姓名/学号',
                dataIndex: 'studentName',
                sorter: () => 0,
                render: (_, {studentNo}) => {
                    return (
                        <div>
                            <div style={{fontWeight: '700'}}>{_}</div>
                            <div>{studentNo}</div>
                        </div>
                    )
                }
            },
            {
                title: '所属标签',
                dataIndex: 'label',
                sorter: () => 0,
                render: () => <span>默认标签</span>
            },
            {
                title: '相似度',
                dataIndex: 'similarity',
                sorter: () => 0,
                render: () => <span>-</span>
            },
            {
                title: '提交状态',
                dataIndex: 'createAt',
                sorter: () => 0,
                render: (_) => <span>{dayjs(_).format('YYYY/MM/DD  HH:mm')}提交</span>
            },
            {
                title: '字数',
                dataIndex: 'fontNum',
                sorter: () => 0

            },
            {
                title: '批阅次数',
                dataIndex: 'correctTimes',
                sorter: () => 0,
                render: () => <span>1</span>
            },
            {
                title: '成绩',
                dataIndex: 'score',
                sorter: () => 0,
                render: (_, {studentId}) => {
                    const score = _;
                    return (
                        <div>
                            <Input
                                style={{
                                    border: 'none',
                                    borderBottom: '1px solid',
                                    borderRadius: '0',
                                    width: '55px',
                                    outline: 'none',
                                    padding: '0',
                                    textAlign: 'center',
                                    fontSize: '20px'
                                }}
                                onBlur={(e) => {
                                    correctHomework(workId, studentId, e.target.value).then(() => {
                                            getHomeworkDetail(workId).then(res => {
                                                setHomeworkDetail(res.data.data)
                                            })
                                            getCorrectList(workId).then(res => {
                                                setCorrectList(res.data.data)
                                            })
                                        }
                                    )
                                }}
                                defaultValue={score}/>
                            /100
                        </div>
                    )
                }
            },
            {
                title: '操作',
                dataIndex: 'function',
                render: () => <a>批阅</a>
            },
        ];

        const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
            console.log('params', pagination, filters, sorter, extra);
        };

        return (
            <CorrectWrapper>
                <header>{homeworkDetail.title}</header>
                <div className="top">
                    <div className="top-left">
                        <div
                            className="tag ">截至: {dayjs(homeworkDetail.releaseTime).format('YYYY/MM/DD : HH:mm')}</div>
                        <div className="tag info">{homeworkDetail.type}</div>
                        <div className="tag info">{homeworkDetail.score}</div>
                        <div className="tag info">查重</div>
                    </div>
                    <div className="top-right">
                        <Switch defaultChecked/>
                        <span>对学生隐藏成绩</span>
                    </div>
                </div>
                <div className="divider"></div>
                <div className="flex-between main">
                    <div className="title-list">
                        <Button style={{
                            ...btnStyle,
                            marginLeft: '0',
                            background: '#e8f0ff',
                            color: '#1967d2'
                        }}>全部(0)</Button>
                        <Button style={{...btnStyle}}>未批({homeworkDetail.noCorrectCount})</Button>
                        <Button style={{...btnStyle}}>已批({homeworkDetail.correctCount})</Button>
                        <Button style={{...btnStyle}}>未交({homeworkDetail.noSubmitCount})</Button>
                    </div>
                    <div className="search-box">
                        <input autoComplete={'on'} type="text" placeholder={'学生姓名搜索'}/>
                        <img src={search} alt=""/>
                    </div>
                </div>
                <div className="nav">
                    <Space wrap>
                        <span>提交状态</span>
                        <Select
                            placeholder={'不限'}
                            style={{width: 120}}
                            options={[]}
                        />
                        <span>相似度</span>
                        <Select
                            placeholder={'不限'}
                            style={{width: 120}}
                            options={[]}
                        />
                        <span>分享状态</span>
                        <Select
                            placeholder={'不限'}
                            style={{width: 120}}
                            options={[]}
                        />
                        <span>按成员分组</span>
                        <Select
                            placeholder={'不限'}
                            style={{width: 120}}
                            allowClear
                            options={[]}
                        />
                    </Space>
                    <br/>
                    <br/>
                    <Space>
                        <span>作业字数</span>
                        <Input placeholder={'字数'}/>
                        -
                        <Input placeholder={'字数'}/>
                    </Space>
                </div>
                <div className="list-box">
                    <div className="divider"></div>
                    <div className="flex-between">
                        <div className="left">
                            <Space>
                                <Dropdown menu={{items: items1}} placement="bottomLeft">
                                    <Button style={{color: "#4285f4"}}>批量给分 <DownOutlined/></Button>
                                </Dropdown>
                                <Dropdown menu={{items: items1}} placement="bottomLeft">
                                    <Button style={{color: "#4285f4"}}>打回作业</Button>
                                </Dropdown>
                                <Dropdown menu={{items: items1}} placement="bottomLeft">
                                    <Button style={{color: "#4285f4"}}>下载 <DownOutlined/></Button>
                                </Dropdown>
                                <Dropdown disabled menu={{items: items1}} placement="bottomLeft">
                                    <Button>变为已更改</Button>
                                </Dropdown>
                            </Space>
                        </div>
                        <div className="right">
                            <Space>
                                <Button type='default'><UndoOutlined/>作业无法在线预览？点此试试</Button>
                                <Button type='default'>转存所有文件到资料模块</Button>
                                <Button type='primary'>一键催交</Button>
                            </Space>
                        </div>
                    </div>
                    <div className="divider"></div>
                    <div className="table">
                        <Table
                            pagination={{position: ['bottomCenter']}}
                            rowSelection={{}}
                            columns={columns}
                            dataSource={correctList}
                            onChange={onChange}
                            showSorterTooltip={{target: 'sorter-icon'}}
                        />
                    </div>
                </div>
                <div className="pagination"></div>

            </CorrectWrapper>
        )
    }


    const onCheckBoxChange: CheckboxProps['onChange'] = (e) => {
        console.log(`checked = ${e.target.checked}`);
    };


    const onChange = (key: string) => {
        console.log(key);
    };


    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '详情',
            children: <Detail/>,
        },
        {
            key: '2',
            label: '批阅',
            children: <Correct/>,
        },
    ];
    return (
        <Wrapper>
            <TeacherHomeworkDetailNav/>
            <Tabs defaultActiveKey="2" items={items} onChange={onChange}/>
        </Wrapper>
    );
}
export default TeacherHomeworkDetail;